<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>hi,tan</title>
<style>
    body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;}
    .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%;
        box-shadow: 0px 0px 20px 3px #444 inset; position: relative;}
    /*原点*/
    .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;}
    /* 指针 */
    .clock_line{ position: absolute;position:absolute;z-index:20;}
    .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px;
        transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;}
    .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000;
        transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;}
    .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60;
        transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;}

    .dot_box{width: inherit; height: inherit;}
    /*时钟数*/
    .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;}
    .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7;
      position:absolute;top:199px;left:200px;}
    .scale-show{ width:12px;height:2px;background-color:#555;float:left;}
    .scale-hidden{width:183px;height:2px;float:left;}
    /*日期*/
    .date_info{width:160px;height:28px;
        line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555;
        font-weight:bold;}
    .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; }
    .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;}
     #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;}


    .hcontent {
        color: #8bf2f1;
        font-family: 'Courier New', Courier, monospace;
        text-align: center;
        font-size: 50px;
    };
</style></head>

<body>
<div class="box" id="clock">
    <!-- 原点 -->
    <div class="origin"></div>
    <!-- 时钟数 -->
    <div class="dot_box">
        <div class="dot" style="left: 180px; top: 340px;">6</div>
        <div class="dot" style="left: 260px; top: 318.564px;">5</div>
        <div class="dot" style="left: 318.564px; top: 260px;">4</div>
        <div class="dot" style="left: 340px; top: 180px;">3</div>
        <div class="dot" style="left: 318.564px; top: 100px;">2</div>
        <div class="dot" style="left: 260px; top: 41.4359px;">1</div>
        <div class="dot" style="left: 180px; top: 20px;">12</div>
        <div class="dot" style="left: 100px; top: 41.4359px;">11</div>
        <div class="dot" style="left: 41.4359px; top: 100px;">10</div>
        <div class="dot" style="left: 20px; top: 180px;">9</div>
        <div class="dot" style="left: 41.4359px; top: 260px;">8</div>
        <div class="dot" style="left: 100px; top: 318.564px;">7</div>
    </div>
    <!-- 时、分、秒针 -->
    <div class="clock_line hour_line" id="hour_line" style="transform: rotate(408deg);"></div>
    <div class="clock_line minute_line" id="minute_line" style="transform: rotate(150deg);"></div>
    <div class="clock_line second_line" id="second_line" style="transform: rotate(126deg);"></div>
    <!-- 日期 -->
    <div class="date_info" id="date_info">2021年3月4日   星期四</div>
    <!-- 时间 -->
    <div class="time_info">
        <div class="time" id="hour_time">16</div>
        <div class="time" id="minute_time">40</div>
        <div class="time" id="second_time">36</div>
    </div>
    <div class="dcontent">
        <h1 class="hcontent" onclick="threeFn()">
            hello word
        </h1>
       </div>
<div class="clock-scale" style="transform: rotate(-90deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-84deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-78deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-72deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-66deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-60deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-54deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-48deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-42deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-36deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-30deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-24deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-18deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-12deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(-6deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(0deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(6deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(12deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(18deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(24deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(30deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(36deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(42deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(48deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(54deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(60deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(66deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(72deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(78deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(84deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(90deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(96deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(102deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(108deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(114deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(120deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(126deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(132deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(138deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(144deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(150deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(156deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(162deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(168deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(174deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(180deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(186deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(192deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(198deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(204deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(210deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(216deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(222deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(228deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(234deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(240deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(246deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(252deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(258deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div><div class="clock-scale" style="transform: rotate(264deg);"> <div class="scale-hidden"></div><div class="scale-show"></div></div></div>

<script src="jquery.js"></script><script src="time.js"></script>
<script>
  // 点击事件
function threeFn(){
        window.location.href="https://www.yuque.com/tanning/mbquef";
}

$(function(){
    var clock = document.getElementById("clock");
    function initNumXY(){
        // 1、12个数字的位置设置
        var radius = 160;//大圆半价
        var dot_num = 360/$(".dot").length;//每个div对应的弧度数
        //每一个dot对应的弧度;
        var ahd = dot_num*Math.PI/180;
        $(".dot").each(function(index, el) {
            $(this).css({
                "left":180+Math.sin((ahd*index))*radius,
                "top":180+Math.cos((ahd*index))*radius
            });
        });
        // 2、刻钟设置
        for(var i = 0; i < 60; i++) {
            clock.innerHTML += "<div class='clock-scale'> " +
                   "<div class='scale-hidden'></div>" +
                   "<div class='scale-show'></div>" +
                  "</div>";
        }
        var scale = document.getElementsByClassName("clock-scale");
            for(var i = 0; i < scale.length; i++) {
                scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
        }
    }
    initNumXY();//调用上面的函数
    //获取时钟id
    var hour_line = document.getElementById("hour_line"),
        minute_line = document.getElementById("minute_line"),
        second_line = document.getElementById("second_line"),
        date_info=document.getElementById("date_info"),//获取date_info
        hour_time = document.getElementById("hour_time"),// 获去时间id
        minute_time = document.getElementById("minute_time"),
        second_time = document.getElementById("second_time");
    //3、设置动态时间
    function setTime(){
        var nowdate = new Date();
        //获取年月日时分秒
        var year = nowdate.getFullYear(),
            month = nowdate.getMonth()+1,
            //day = nowdate.getDay(),
			day = nowdate.getDate();
            hours = nowdate.getHours(),
            minutes = nowdate.getMinutes(),
            seconds = nowdate.getSeconds(),
            date = nowdate.getDate();
        var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        // 获取日期id
        date_info.innerHTML=year+"年"+month+"月"+day+"日   "+weekday[day % 7];
        hour_time.innerHTML = hours >=10 ? hours : "0"+hours;
        minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes;
        second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;
        console.log(year+"年"+month+"月"+day+"日   "+weekday[day]);
        //时分秒针设置
        var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
        hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
        minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';
        second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';
    }
    // setTime();
    setInterval(setTime, 1000);


});
</script>
</body></html>
